/*
 * @Author: hongbin
 * @Date: 2022-12-21 20:41:09
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-24 10:46:20
 * @Description:主页 发步动态 显示话题
 */
import Link from "next/link";
import { FC } from "react";
import styled, { css } from "styled-components";
import { get } from "../src/api";
import AddFriend from "../src/components/AddFriend";
import Dynamic from "../src/components/Dynamic";
import { Set } from "../src/components/Icon";
import SEOHeader from "../src/components/SEO";
import TopicList from "../src/components/Topic/List";
import { useAuth } from "../src/context/AuthProvide";
import { UserNameSlice } from "../src/helper";
import { UserInfo } from "../src/hook/useRegisterForm";
import { flexCenter, FlexDiv } from "../src/styled";

interface IProps {
    user: UserInfo;
}

const Css = css`
    transition: 0.3s;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: min(14px, 2vw);
    background-color: #021f00;
    svg {
        width: min(14px, 2vw);
        height: min(14px, 2vw);
        margin-right: 5px;
        path {
            fill: #fff;
        }
    }

    :hover {
        background-color: #096f02;
    }
`;

const HomePage: FC<IProps> = ({ user }) => {
    const { user: self } = useAuth();
    if (!user)
        return (
            <FlexDiv style={{ height: "100vh", color: "#fffae5" }} justify="center" items="center">
                <SEOHeader title="用户以注销" />
                <h1>未查询到该用户 该用户可能已注销</h1>
            </FlexDiv>
        );

    const isSelf = self._id == user._id;

    return (
        <Container>
            <SEOHeader title={isSelf ? "个人中心" : `${user.name}的个人中心`} />
            <Head>
                <Name>{UserNameSlice(user.name)}</Name>
                {isSelf ? (
                    <Link href="/userProfile">
                        <FlexDiv items="center" justify="center" css={Css}>
                            <Set />
                            <span>管理账号</span>
                        </FlexDiv>
                    </Link>
                ) : (
                    <AddFriend targetId={user._id} />
                )}
            </Head>
            <Main>
                <Dynamic user={user} />
                <TopicList user={user} />
            </Main>
        </Container>
    );
};

/**
 * 服务端执行 获取用户配置
 */
export const getServerSideProps = async ({ query: { id } }: any) => {
    const { data } = await get("/Auth/queryUserById?id=" + id);
    console.log("hi", data);

    const props = {} as { user: UserInfo };

    if (data) props.user = data;

    return {
        props,
    };
};

export default HomePage;

const Main = styled.div`
    display: flex;
    width: 80vw;
    margin-top: 1vh;
    align-items: flex-start;
    & > div {
        background-color: #083d05;
        border-radius: 2vw;
        padding: 1vh 1vw;
    }
    & > *:first-child {
        flex: 4;
    }
    & > *:last-child {
        flex: 1;
        margin-left: 1vw;
    }
`;

const Name = styled.div`
    width: 6vw;
    height: 6vw;
    border-radius: 6vw;
    background-color: #0b7c06;
    font-size: 5vw;
    text-align: center;
    overflow: hidden;
`;

const Head = styled.div`
    position: relative;
    width: 40vw;
    margin-left: 9vw;
    height: 8vw;
    align-self: flex-start;
    background-color: #083d05;
    border-radius: 12vw;
    padding: 1vw 1vh;
    ${flexCenter};
    justify-content: space-between;
    padding-right: 2vw;
`;

const Container = styled.div`
    ${flexCenter};
    padding: 1vh 1vw;
    flex-direction: column;
    color: #fff;
`;
